<template>
  <div>
    <vue-particles
      color="#c96b42"
      :particleOpacity="0.5"
      :particlesNumber="30"
      shapeType="circle"
      :particleSize="6"
      linesColor="#409EFF"
      :linesWidth="1"
      :lineLinked="true"
      :lineOpacity="0.3"
      :linesDistance="150"
      :moveSpeed="2"
      :hoverEffect="true"
      hoverMode="grab"
      :clickEffect="true"
      clickMode="push">
    </vue-particles>
    <div class="background-div">
      <el-form status-icon label-width="100px" class="demo-ruleForm">
        <el-form-item label="密码">
          <el-input type="password" prefix-icon="el-icon-search"></el-input>
        </el-form-item>
        <el-form-item label="确认密码">
          <el-input type="password" prefix-icon="el-icon-search" size="medium"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary">提交</el-button>
          <el-button>重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {}
  },
  methods: {}
}
</script>

<style scoped>
#particles-js {
  width: 100%;
  height: 100%;
  background-color: #2f0c37;
  position: absolute;

}

.background-div {
  height: 100%;
  width: 100%;
  position: absolute;
  display: flex;
  display: -webkit-flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
}

.el-form {
  padding: 100px 80px 100px 50px;
  opacity: 0.5;
  pointer-events: visible;
}

.item label {
  color: #ffffff !important;
}

</style>
